import React, { useState} from 'react';
import './index.css'
import icon from './LOGOB.png'
import {useLocation, useNavigate} from "react-router-dom"
import {Input} from 'antd';
import {useAppContext} from "../../App";
import {getTermTranslation} from "../../util/language";
import {Down, Up} from "@icon-park/react";

const { Search } = Input;


function Header(props) {

    let navigate = useNavigate();

    const { selectLanguage, setSelectLanguage,setSelectTab } = useAppContext();

    const { routeHistory, setRouteHistory } = useAppContext();

    const location = useLocation();

    const [showTechMenu, setShowTechMenu] = useState(false);
    const [showQualityMenu, setShowQualityMenu] = useState(false);
    const  customStyle  =  selectLanguage === 'en' ? { fontSize: '17px' } : {};

    function toPage(url, page, text, params, event) {
        if(url !== '/home'){
            setSelectTab('')
        }
        if (url == '/home'){
            setRouteHistory((prev) => [...prev, '/home']);
        } else{
            setRouteHistory((prev) => [...prev, location.pathname]);
        }

        navigate(url, {
            replace: false,
            state: {params, page, text}
        })
        if (event != null){
            event.stopPropagation();
        }
    }

    function toSearch(event) {
        toPage("/portal/globalSearch", "globalSearch", getTermTranslation(selectLanguage,'全站搜索'), {
            keywords: event
        }, null)

        /*
        const params = {
            key: "测试",
            loginid: 1,
            contentType: "DOC",
            page: "1",
            pagepernum: "20",
            sysVersion: "9",
        }
        debugger
        http.doGet('/fullsearch/base/doSearch', params).then(res => {
            debugger
            if (res.status === 200) {
                debugger
            } else {

            }

        }).catch(reason => {
            message.error(reason.message)
        })
         */
    }
    function toLogin() {
        window.open("https://oa3.giwp.org.cn/", "_self")
    }
    function toMail() {
        window.open("https://mail.giwp.org.cn/", "_self")
    }
    function toCloud() {
        window.open("https://wps.giwp.org.cn/", "_self")
    }

    function handleChangeLanguage(value) {
        setSelectLanguage(value)
    }

    function calMarginLeft(id){
        // const wrapper = document.getElementById("tech_id_wrapper");
        // tech_id quality_id
        const element = document.getElementById(id);
        if (element){
            const distanceToLeft = element.getBoundingClientRect().left;
            return distanceToLeft + 100 + "px";
        }else{
            return "0px";
        }

    }
    return (
        <div className="web-header">
            <div className="top-login">
                <Search className="login-text search" onSearch={toSearch}   placeholder={getTermTranslation(selectLanguage,'全站搜索')}   />
                <span className="login-text cloud" onClick={toCloud}>{getTermTranslation(selectLanguage,'云文档')}</span>
                <span className="login-text mail" onClick={toMail}>{getTermTranslation(selectLanguage,'电子邮箱')}</span>
                <span className="login-text login" onClick={toLogin}>{getTermTranslation(selectLanguage,'登录')}</span>
                {/*<Select*/}
                {/*    className="login-text search"*/}
                {/*    defaultValue="cn"*/}
                {/*    style={{ width: 120 }}*/}
                {/*    onChange={handleChangeLanguage}*/}
                {/*    options={[*/}
                {/*        { value: 'cn', label: '中文' },*/}
                {/*        { value: 'en', label: 'English' },*/}
                {/*    ]}*/}
                {/*/>*/}
            </div>
            <div className="top-content">
                <div className="top-icon">
                    <img src={icon} alt="" className="top-icon-img" onClick={(event) => {
                        toPage("/home", "", "", {}, event);
                    }}/>
                </div>
                <div className="top-menu ">
                    <div className={`top-menu-one`} onClick={(event) => {
                        toPage("/home", "", "", {}, event);
                    }}>
                        <div style={customStyle}  className="top-menu-one-text">{getTermTranslation(selectLanguage,'首页')}</div>
                    </div>
                    <div className={`top-menu-one`}
                         onClick={(event) => {
                             toPage("/portal/into", "into", getTermTranslation(selectLanguage,'关于总院'), {docId: 390}, event)
                         }}>
                        <div style={customStyle}  className="top-menu-one-text">{getTermTranslation(selectLanguage, '走进总院')}</div>
                        <div className="top-menu-one-children">
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/into", "into", getTermTranslation(selectLanguage,'关于总院'), {docId: 390}, event)}>{getTermTranslation(selectLanguage,'关于总院')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/leader", "into", getTermTranslation(selectLanguage,'现任领导'), {}, event)}>{ getTermTranslation(selectLanguage,'现任领导')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/org", "into", getTermTranslation(selectLanguage,'组织机构'), {docId: 288}, event)}>{getTermTranslation(selectLanguage,'组织机构')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/function", "into", getTermTranslation(selectLanguage,'主要职能'), {docId: 410}, event)}>{getTermTranslation(selectLanguage, '主要职能')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/honor", "into", getTermTranslation(selectLanguage,'总院荣誉'), {}, event)}>{getTermTranslation(selectLanguage, '总院荣誉')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/contactUsPage", "into", getTermTranslation(selectLanguage,'联系我们'), {}, event)}>{getTermTranslation(selectLanguage, '联系我们')}
                            </div>
                        </div>
                    </div>
                    <div className={`top-menu-one`}
                         onClick={(event) => {
                             toPage("/portal/dynamic", "news", getTermTranslation(selectLanguage,'总院动态'), {dirId: "256,402"}, event)
                         }}>
                        <div style={customStyle}  className="top-menu-one-text">{getTermTranslation(selectLanguage,'新闻中心')}</div>
                        <div className="top-menu-one-children">
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/dynamic", "news", getTermTranslation(selectLanguage, '总院动态'), {dirId: "256,402"}, event)}>{getTermTranslation(selectLanguage, '总院动态')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/news", "news", getTermTranslation(selectLanguage, '水利要闻'), {dirId: "257,403"}, event)}>{getTermTranslation(selectLanguage, '水利要闻')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/newsNotice", "news", getTermTranslation(selectLanguage, '通知公告'), {dirId: "229,434"}, event)}>{getTermTranslation(selectLanguage, '通知公告')}
                            </div>
                        </div>
                    </div>
                    <div className={`top-menu-one`}
                         onClick={(event) => {
                             toPage("/portal/party", "party", getTermTranslation(selectLanguage, '党建动态'), {dirId: "290,405"}, event)
                         }}>
                        <div style={customStyle}  className="top-menu-one-text">{getTermTranslation(selectLanguage,'党的建设')}</div>
                        <div className="top-menu-one-children">
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/party", "party", getTermTranslation(selectLanguage,'党建动态'), {dirId: "290,405"}, event)}>{getTermTranslation(selectLanguage,'党建动态')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/build", "party", getTermTranslation(selectLanguage,'群团建设'), {dirId: "291,407"}, event)}>{getTermTranslation(selectLanguage,'群团建设')}
                            </div>
                        </div>
                    </div>
                    <div className={`top-menu-one`}
                         onClick={(event) => {
                             toPage("/portal/planning", "business", getTermTranslation(selectLanguage,'规划编制'), {dirId: "295,409"}, event)
                         }}>
                        <div style={customStyle}  className="top-menu-one-text">{getTermTranslation(selectLanguage,'业务范围')}</div>
                        <div className="top-menu-one-children">
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/planning", "business", getTermTranslation(selectLanguage,'规划编制'), {dirId: "295,409"}, event)}>{getTermTranslation(selectLanguage,'规划编制')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/strategy", "business", getTermTranslation(selectLanguage,'战略研究'), {dirId: "296,411"}, event)}>{getTermTranslation(selectLanguage,'战略研究')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/review", "business", getTermTranslation(selectLanguage,'技术审查'), {dirId: "297,413"}, event)}>{getTermTranslation(selectLanguage,'技术审查')}
                            </div>
                            <div className="children-separate"/>
                            {/*<div className="top-menu-one-children-one"*/}
                            {/*     onClick={(event) => toPage("/portal/industry", "business", getTermTranslation(selectLanguage,'行业管理'), {dirId: "298,415"}, event)}>{getTermTranslation(selectLanguage,'行业管理')}*/}
                            {/*</div>*/}
                            {/*<div className="children-separate"/>*/}
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/services", "business", getTermTranslation(selectLanguage,'市场服务'), {dirId: "299,417"}, event)}>{getTermTranslation(selectLanguage,'市场服务')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/research", "business", getTermTranslation(selectLanguage,'科学研究'), {dirId: "300,419"}, event)}>{getTermTranslation(selectLanguage,'科学研究')}
                            </div>
                        </div>
                    </div>
                    <div className={`top-menu-one`}
                         onMouseLeave={() => {
                             setShowTechMenu(false)
                             setShowQualityMenu(false)

                         }}
                         onClick={(event) => {
                             toPage("/portal/standards", "column", getTermTranslation(selectLanguage,'技术标准'), {dirId: "912,914,915,917"}, event)
                         }}>
                        <div style={customStyle}  className="top-menu-one-text" onMouseLeave={() => {
                            setShowTechMenu(false)
                            setShowQualityMenu(false)
                        }}>{getTermTranslation(selectLanguage,'行业管理')}</div>
                        <div className="top-menu-one-children" id={"tech_id_wrapper"}>
                            <div className="top-menu-one-children-one"
                                 id={"tech_id"}
                                 onMouseEnter={() => {
                                     setShowQualityMenu(false)
                                     setShowTechMenu(true)
                                 }}
                                 onClick={(event) => toPage("/portal/standards", "column", getTermTranslation(selectLanguage,'技术标准'), {dirId: "912,914,915,917"}, event)}>
                                    {
                                        getTermTranslation(selectLanguage,'技术标准')

                                    }
                                {
                                    showTechMenu ?  <Up theme="outline" size="24" fill="#ffffff"/> : <Down theme="outline" size="24" fill="#ffffff"/>
                                }



                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 id={"quality_id"}
                                 onMouseEnter={() => {
                                     setShowTechMenu(false)
                                     setShowQualityMenu(true)
                                 }}
                                 onClick={(event) => toPage("/portal/quality", "column", getTermTranslation(selectLanguage,'质量监督'), {dirId: "918,920,921,923"}, event)}>
                                {
                                    getTermTranslation(selectLanguage,'质量监督')
                                }
                                {
                                    showQualityMenu ?  <Up theme="outline" size="24" fill="#ffffff"/>: <Down theme="outline" size="24" fill="#ffffff"/>
                                }

                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onMouseEnter={() => {
                                     setShowTechMenu(false)
                                     setShowQualityMenu(false)
                                 }}
                                 onClick={(event) => toPage("/portal/set", "column", getTermTranslation(selectLanguage,'定额管理'), {dirId: "327,433"}, event)}>{getTermTranslation(selectLanguage,'定额管理')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onMouseEnter={() => {
                                     setShowTechMenu(false)
                                     setShowQualityMenu(false)
                                 }}
                                 onClick={(event) => toPage("/portal/exam", "column", getTermTranslation(selectLanguage,'资格考试'), {docId: 327995}, event)}>{getTermTranslation(selectLanguage,'资格考试')}
                            </div>
                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onMouseEnter={() => {
                                     setShowTechMenu(false)
                                     setShowQualityMenu(false)
                                 }}
                                 onClick={(event) => {toPage("/portal/academic", 'column',getTermTranslation(selectLanguage,'社团组织'), {docId: 356967}, event)}}>{getTermTranslation(selectLanguage,'社团组织')}
                            </div>
                        </div>
                        {
                            showTechMenu  && (
                                    <div>
                                        <div className="top-menu-two-children">
                                            <div className="top-menu-two-children-two"
                                                 style={{marginLeft: calMarginLeft('tech_id')}}
                                                 onClick={
                                                    (
                                                        event) =>
                                                        toPage("/portal/standards",
                                                            "column",
                                                            getTermTranslation(selectLanguage, '政策办法'),
                                                            {dirId: "912,914"},
                                                            event
                                                        )
                                                    }
                                            >
                                                {getTermTranslation(selectLanguage, '政策办法')}
                                            </div>
                                        </div>
                                        <div className="top-menu-three-children">
                                            <div className="top-menu-two-children-two"
                                                 style={{marginLeft: calMarginLeft('tech_id')}}
                                                 onClick={
                                                    (event) =>
                                                        toPage("/portal/standards", "column", getTermTranslation(selectLanguage, '标准编制'),
                                                            {dirId: "915,917"},
                                                            event
                                                )}
                                            >
                                                {
                                                    getTermTranslation(selectLanguage, '标准编制')
                                                }
                                            </div>
                                        </div>
                                    </div>
                                    )
                                    }
                                    {
                                        showQualityMenu && (
                                            <div>
                                                <div className="top-menu-two-children">
                                                    <div className="top-menu-two-children-two"
                                                         style={{marginLeft: calMarginLeft('quality_id')}}
                                                         onClick={
                                                        (event) =>
                                                            toPage("/portal/quality",
                                                                "column",
                                                                getTermTranslation(selectLanguage, '政策办法'),
                                                                {dirId: "918,920"},
                                                                event
                                                        )
                                                    }
                                                    >
                                                        {getTermTranslation(selectLanguage, '政策办法')}
                                                    </div>
                                                </div>
                                                <div className="top-menu-three-children">
                                                    <div className="top-menu-two-children-two"
                                                         style={{marginLeft: calMarginLeft('quality_id')}}
                                                         onClick={
                                                            (event) =>
                                                                toPage("/portal/quality",
                                                                    "column",
                                                                    getTermTranslation(selectLanguage, '监督动态'),
                                                                    {dirId: "921,923"},
                                                                    event
                                                                )
                                                        }
                                                    >
                                                        {getTermTranslation(selectLanguage, '监督动态')}
                                                    </div>
                                                </div>

                                            </div>

                                        )
                                    }

                    </div>
                    <div className={`top-menu-one`}
                         onClick={(event) => {
                             toPage("/portal/team", "team", getTermTranslation(selectLanguage, '人才团队'), {docId: 301}, event)
                         }}>
                        <div style={customStyle}
                             className="top-menu-one-text">{getTermTranslation(selectLanguage, '人才团队')}</div>
                        <div className="top-menu-one-children">
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/team", "team", getTermTranslation(selectLanguage, '人才队伍'), {docId: 301}, event)}>{getTermTranslation(selectLanguage, '人才队伍')}
                            </div>

                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/innovationTeam", "team", getTermTranslation(selectLanguage, '人才创新团队'), {docId: 351158}, event)}>{getTermTranslation(selectLanguage, '人才创新团队')}
                            </div>

                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/teamnew", "team", getTermTranslation(selectLanguage, '揭榜挂帅团队'), {docId: 351160}, event)}>{getTermTranslation(selectLanguage, '揭榜挂帅团队')}
                            </div>

                            {/*<div className="children-separate"/>*/}
                            {/*<div className="top-menu-one-children-one"*/}
                            {/*     onClick={(event) => toPage("/portal/teamBuilder", "team", getTermTranslation(selectLanguage, '团队建设'), {dirId: "303,421"}, event)}>{getTermTranslation(selectLanguage, '团队建设')}*/}
                            {/*</div>*/}


                            <div className="children-separate"/>
                            <div className="top-menu-one-children-one"
                                 onClick={(event) => toPage("/portal/call", "team", getTermTranslation(selectLanguage, '招贤纳士'), {dirId: "303,421"}, event)}>{getTermTranslation(selectLanguage, '招贤纳士')}
                            </div>
                        </div>
                    </div>
                    
                </div>
            </div>
        </div>
    );
}

export default Header;
